import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_topia/common_widget/my_app_bar.dart';
import 'package:card_topia/design_specifications.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../common_widget/bottom_button.dart';

///我的卡片详情页

class MyCardDetailPage extends StatefulWidget {
  const MyCardDetailPage({super.key});

  @override
  State<MyCardDetailPage> createState() => _MyCardDetailPageState();
}

class _MyCardDetailPageState extends State<MyCardDetailPage> {
  final _pageController = PageController();
  int currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff161519),
      appBar: CustomAppBar(
        showLeading: true,
        isDark: true,
        actions: [
          InkWell(
            onTap: () {
              _pageController.animateToPage(currentPage == 0 ? 1 : 0,
                  duration: const Duration(milliseconds: 200),
                  curve: Curves.easeInOut);
            },
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              child: Row(
                children: [
                  if (currentPage == 1)
                    const Icon(
                      Icons.keyboard_double_arrow_left_rounded,
                      color: descColor,
                    ),
                  Text(
                    currentPage == 1 ? "卡片详情" : "交易记录",
                    style: TextStyle(
                        fontSize: 14.sp, fontFamily: harmony, color: descColor),
                  ),
                  if (currentPage == 0)
                    const Icon(
                      Icons.keyboard_double_arrow_right,
                      color: descColor,
                    )
                ],
              ),
            ),
          )
        ],
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) {
          currentPage = index;
          setState(() {});
        },
        children: [
          //详情页
          Container(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  //名称
                  Container(
                      alignment: Alignment.centerLeft,
                      child: Row(
                        children: [
                          Text(
                            "[游戏王]黑暗大法师的左手",
                            style: TextStyle(
                                fontSize: 18.sp,
                                fontWeight: FontWeight.bold,
                                fontFamily: harmony,
                                color: Colors.white),
                          ),
                          SizedBox(
                            width: 8.w,
                          ),
                          Container(
                            decoration: BoxDecoration(
                                color: themeColor,
                                borderRadius: BorderRadius.circular(4.w)),
                            height: 20.w,
                            width: 40.w,
                            alignment: Alignment.center,
                            child: Text(
                              "UR",
                              style: TextStyle(
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white),
                            ),
                          )
                        ],
                      )),
                  //卡片
                  SizedBox(
                    height: 24.w,
                  ),
                  CachedNetworkImage(
                    imageUrl:
                        "https://cdn.233.momobako.com/ygopro/pics/80071763.jpg",
                    width: 280.w,
                  ),
                  //详情
                  SizedBox(
                    height: 24.w,
                  ),
                  Container(
                    decoration: BoxDecoration(
                        color: Color(0xff222125),
                        borderRadius: BorderRadius.circular(8.w)),
                    padding: EdgeInsets.all(12.w),
                    child: Column(
                      children: [
                        DetailItem(
                          title: '介绍',
                          content:
                              "融合召唤这只怪兽，必须用上面所写的卡融合召唤。通常魔法发动时支付1000分，那个通常魔法的效果无效化。这张卡战斗破坏的效果怪兽的效果无效化",
                        ),
                        DetailItem(title: "生产日期", content: "2020-09-01"),
                        DetailItem(
                          title: "发行商",
                          contentChild: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Container(
                                child: CachedNetworkImage(
                                  imageUrl:
                                      "https://www.kayou110.com/NewWeb/img//index/logo.png",
                                  height: 18.w,
                                ),
                              ),
                              Text(
                                "卡游(上海)传播有限公司",
                                style: TextStyle(
                                    fontSize: 14.sp,
                                    fontFamily: harmony,
                                    color: descColor),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 16.w),
                    child: Row(
                      children: [
                        Expanded(
                            child: BottomButton(
                          text: "转赠",
                          enable: true,
                          isOutline: true,
                        )),
                        SizedBox(
                          width: 16.w,
                        ),
                        Expanded(
                            child: BottomButton(
                          text: "售出",
                          enable: true,
                        )),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
          //交易记录
          Container(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  TradeInfoItem(
                    type: "交易",
                    time: '2020-09-09 12:34',
                    currentPerson: Column(
                      children: [
                        CircleAvatar(),
                        SizedBox(
                          height: 8.w,
                        ),
                        Text(
                          "爱新觉罗",
                          style: TextStyle(
                              fontSize: 14.sp,
                              fontFamily: harmony,
                              color: descColor),
                        )
                      ],
                    ),
                    lastPerson: Column(
                      children: [
                        CircleAvatar(),
                        SizedBox(
                          height: 8.w,
                        ),
                        Text(
                          "爱新觉罗",
                          style: TextStyle(
                              fontSize: 14.sp,
                              fontFamily: harmony,
                              color: descColor),
                        )
                      ],
                    ),
                  ),
                  TradeInfoItem(
                    type: "转赠",
                    time: '2020-09-09 12:34',
                    currentPerson: Column(
                      children: [
                        CircleAvatar(),
                        SizedBox(
                          height: 8.w,
                        ),
                        Text(
                          "爱新觉罗",
                          style: TextStyle(
                              fontSize: 14.sp,
                              fontFamily: harmony,
                              color: descColor),
                        )
                      ],
                    ),
                    lastPerson: Column(
                      children: [
                        CircleAvatar(),
                        SizedBox(
                          height: 8.w,
                        ),
                        Text(
                          "爱新觉罗",
                          style: TextStyle(
                              fontSize: 14.sp,
                              fontFamily: harmony,
                              color: descColor),
                        )
                      ],
                    ),
                  ),
                  // GiveInfoItem(),
                  TradeInfoItem(
                    type: '首次绑定',
                    time: '2020-09-01 19:22',
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

class DetailItem extends StatelessWidget {
  const DetailItem(
      {super.key, required this.title, this.content, this.contentChild})
      : assert(content != null || contentChild != null);
  final String title;
  final String? content;
  final Widget? contentChild;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      margin: EdgeInsets.symmetric(vertical: 8.w),
      padding: EdgeInsets.only(right: 16.w),
      child: Row(
        crossAxisAlignment: contentChild == null
            ? CrossAxisAlignment.start
            : CrossAxisAlignment.center,
        children: [
          Text(
            title,
            style: TextStyle(
                fontFamily: harmony, fontSize: 14.sp, color: disableColor),
          ),
          SizedBox(
            width: 40.w,
          ),
          content == null
              ? Expanded(
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: contentChild,
                  ),
                )
              : Expanded(
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: Text(
                      content!,
                      style: TextStyle(
                          fontFamily: harmony,
                          fontSize: 14.sp,
                          color: descColor),
                    ),
                  ),
                ),
        ],
      ),
    );
  }
}

///交易记录item
class TradeInfoItem extends StatelessWidget {
  const TradeInfoItem(
      {super.key,
      required this.type,
      this.lastPerson,
      this.currentPerson,
      this.price,
      required this.time});

  final String type;
  final Widget? lastPerson;
  final Widget? currentPerson;
  final String? price;
  final String time;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 16.w),
      decoration: BoxDecoration(
          color: Color(0xff222125), borderRadius: BorderRadius.circular(8.w)),
      padding: EdgeInsets.all(12.w),
      child: Column(
        children: [
          Row(
            children: [
              Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4.w),
                      border: Border.all(
                        color: type=="转赠"?descColor:themeColor,
                      )),
                  padding:
                      EdgeInsets.symmetric(horizontal: 12.w, vertical: 4.w),
                  child: Text(
                    type,
                    style: TextStyle(
                      fontSize: 14.sp,
                      fontFamily: harmony,
                      color: type=="转赠"?descColor:themeColor,
                    ),
                  )),
              const Spacer(),
              Text(
                time,
                style: TextStyle(
                    fontSize: 14.sp, fontFamily: harmony, color: descColor),
              ),
            ],
          ),
          if (lastPerson != null && currentPerson != null)
            Divider(thickness: 0.1,color: descColor,height: 24.w,),
            if (lastPerson != null && currentPerson != null)
            Container(
              margin: EdgeInsets.only(top: 16.w),
              child: Row(
                children: [
                  lastPerson!,
                  Expanded(
                      child: Container(
                              alignment: Alignment.center,
                              child: type=="转赠"?Container():Column(
                                children: [
                                  Text(
                                    "\$32",
                                    style: TextStyle(
                                        fontSize: 22.sp,
                                        color: Colors.white,
                                        fontFamily: harmony,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  SizedBox(height: 8.w,),
                                  Text(
                                    "成交价",
                                    style: TextStyle(
                                        fontSize: 12.sp,
                                        color: descColor,
                                        fontFamily: harmony,),
                                  )
                                ],
                              ))),
                  currentPerson!
                ],
              ),
            )
        ],
      ),
    );
  }
}
